<template>
    <div class="HomeBox">
        <span class="notime">
            <span>{{ nowTime }}</span>
            <span class="marl-20 iconfont icon-xitongshezhi fz-24" style="cursor: pointer" @click="isShowSetting = true"></span>
        </span>
        <div class="selectDepartmentClass">
            <DataSelect table="Department" class="w-100" :teleported="false" :filter="{ _Type: Enums.Department_Type.矿山 }" v-model:id="selectDepartmentID" @change="GetHomeData"></DataSelect>
        </div>
        <div class="title">
            <span> {{ title }} </span>
        </div>
        <div class="topBox">
            <div class="topBoxLine">
                <div class="boxTitle">
                    <span> 在用绳综合状态情况 </span>
                </div>
                <div class="topNum">
                    <div class="topNumBox">
                        <div class="topNumItem">
                            <!-- {{ numObj.green }} -->
                            <div id="diskGreen" class="diskEcharts"></div>
                        </div>
                        <div class="topNumName">轻度</div>
                    </div>
                    <div class="topNumBox">
                        <div class="topNumItem">
                            <!-- {{ numObj.blue }} -->
                            <div id="diskBlue" class="diskEcharts"></div>
                        </div>
                        <div class="topNumName">中度</div>
                    </div>
                    <div class="topNumBox">
                        <div class="topNumItem">
                            <!-- {{ numObj.yellow }} -->
                            <div id="diskYellow" class="diskEcharts"></div>
                        </div>
                        <div class="topNumName">重度</div>
                    </div>
                    <div class="topNumBox">
                        <div class="topNumItem">
                            <!-- {{ numObj.orange }} -->
                            <div id="diskOrange" class="diskEcharts"></div>
                        </div>
                        <div class="topNumName">严重</div>
                    </div>
                    <div class="topNumBox">
                        <div class="topNumItem">
                            <!-- {{ numObj.grey }} -->
                            <div id="diskGray" class="diskEcharts"></div>
                        </div>
                        <div class="topNumName">报废</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="bottomBox">
            <div class="bottomItem">
                <div class="boxTitle">
                    <span> 在用绳LA情况 </span>
                </div>
                <div class="chartBox" id="chart1"></div>
            </div>
            <div class="bottomItem">
                <div class="boxTitle">
                    <span> 在用绳DIA情况 </span>
                </div>
                <div class="chartBox" id="chart2"></div>
            </div>
            <div class="bottomItem">
                <div class="boxTitle">
                    <span> 在用绳LMA情况 </span>
                </div>
                <div class="chartBox" id="chart3"></div>
            </div>
            <div class="bottomItem">
                <div class="boxTitle">
                    <span> 在用绳LL情况 </span>
                </div>
                <div class="chartBox" id="chart4"></div>
            </div>
        </div>

        <MyDialog v-model="isShowSetting" @close="isShowSetting = false" title="信息设置" closeText="取消">
            <el-form ref="CheckWireropeDetailFormRef" label-width="110">
                <el-form-item label="平台名称">
                    <el-input v-model="title" maxlength="50"></el-input>
                </el-form-item>
                <!-- <el-form-item label="请选择矿山">
                    <DataSelect table="Department" class="w-100" :filter="{ _Type: Enums.Department_Type.矿山 }" v-model:id="selectDepartmentID"></DataSelect>
                </el-form-item> -->
            </el-form>

            <template #footer>
                <el-button type="primary" @click="onSubmit">确定</el-button>
            </template>
        </MyDialog>
    </div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import _ from "lodash";
import Enums from "@/gx/Enums";
import "echarts-liquidfill";

let numObj = ref<any>({});
const HomeData = ref<any>({});
const nowTime = ref<any>("00:00:00");
const title = ref<any>("矿用钢丝绳全生命周期(LCM)管理平台");

let echartsDsq = ref<any>();
let timeDsq = ref<any>();
//页面加载
onMounted(() => {
    clearCharts();
    Init();
    echartsDsq.value = setInterval(() => {
        clearCharts();
        initChart();
    }, 20000);

    timeDsq.value = setInterval(() => {
        nowTime.value = Gx.FormatDate("YYYY-MM-DD HH:mm:ss");
    }, 1000);
});

onUnmounted(() => {
    clearInterval(echartsDsq.value);
    clearInterval(timeDsq.value);
});

//初始化
const Init = () => {
    GetHomeData();
};

// 获取首页数据
const GetHomeData = () => {
    App.CallApi(Api.UsingWirerope.GetHomeData(), {
        data: {
            _DepartmentID: selectDepartmentID.value,
        },
        success: (res: any) => {
            HomeData.value = res;
            numObj.value = res.zhongHe;
            initChart();
            diskInit();
        },
    });
};

const isShowSetting = ref(false);
const selectDepartmentID = ref<any>(null);

const onSubmit = () => {
    GetHomeData();
    isShowSetting.value = false;
};

window.addEventListener("resize", function () {
    let myChartGreen = echarts.init(document.getElementById("diskGreen"));
    let myChartBlue = echarts.init(document.getElementById("diskBlue"));
    let myChartYellow = echarts.init(document.getElementById("diskYellow"));
    let myChartOrange = echarts.init(document.getElementById("diskOrange"));
    let myChartGray = echarts.init(document.getElementById("diskGray"));
    let chart1 = echarts.init(document.getElementById("chart1")),
        chart2 = echarts.init(document.getElementById("chart2")),
        chart3 = echarts.init(document.getElementById("chart3")),
        chart4 = echarts.init(document.getElementById("chart4"));

    // 让我们的图表调用 resize这个方法
    myChartGreen.resize();
    myChartBlue.resize();
    myChartYellow.resize();
    myChartOrange.resize();
    myChartGray.resize();

    chart1.resize();
    chart2.resize();
    chart3.resize();
    chart4.resize();
});

// 初始化水球
const diskInit = () => {
    let totalNum = _.sumBy(Object.values(_.cloneDeep(numObj.value)), (x) => {
        return Number(x);
    });
    let diskObj = {
        green: {
            value: numObj.value.green,
            normalColor: "#66C239",
            backgroundColor: "#ADFC88",
            ratio: numObj.value.green / totalNum,
        },
        blue: {
            value: numObj.value.blue,
            normalColor: "#3D99FA",
            backgroundColor: "#ACDBFC",
            ratio: numObj.value.blue / totalNum,
        },
        yellow: {
            value: numObj.value.yellow,
            normalColor: "#E9E02C",
            backgroundColor: "#FAF5DC",
            ratio: numObj.value.yellow / totalNum,
        },
        orange: {
            value: numObj.value.orange,
            normalColor: "#F9A420",
            backgroundColor: "#FAD89E",
            ratio: numObj.value.orange / totalNum,
        },
        grey: {
            value: numObj.value.grey,
            normalColor: "#D6D6D7",
            backgroundColor: "#E8EDF8",
            ratio: numObj.value.grey / totalNum,
        },
    };
    let myChartGreen = echarts.init(document.getElementById("diskGreen"));
    let myChartBlue = echarts.init(document.getElementById("diskBlue"));
    let myChartYellow = echarts.init(document.getElementById("diskYellow"));
    let myChartOrange = echarts.init(document.getElementById("diskOrange"));
    let myChartGray = echarts.init(document.getElementById("diskGray"));

    let optionsGreen = getDiskOption(diskObj.green);
    let optionsBlue = getDiskOption(diskObj.blue);
    let optionsYellow = getDiskOption(diskObj.yellow);
    let optionsOrange = getDiskOption(diskObj.orange);
    let optionsGray = getDiskOption(diskObj.grey);

    myChartGreen.setOption(optionsGreen);
    myChartBlue.setOption(optionsBlue);
    myChartYellow.setOption(optionsYellow);
    myChartOrange.setOption(optionsOrange);
    myChartGray.setOption(optionsGray);
};
// 获取手球数据
const getDiskOption = (diskData: any) => {
    let options = {
        series: [
            {
                // 水球图
                type: "liquidFill", // 水球图
                name: "Liquid Fill1", // 水球图名称
                radius: "100%", // 水球图半径
                itemStyle: {
                    // 水球图样式
                    opacity: 1, // 水球图透明度
                    shadowBlur: 0, // 波浪的阴影范围
                },
                data: [
                    {
                        // 水球图数据
                        name: "score", // 水球图数据名称
                        direction: "right", // 水球图数据方向
                        value: diskData.ratio, // 水球图数据值
                        itemStyle: {
                            // 水球图数据样式
                            opacity: 1, // 水球图数据透明度
                            normal: {
                                // 水球图数据正常样式
                                color: diskData.normalColor, // 水球图数据正常样式颜色
                            },
                        },
                    },
                ],

                backgroundStyle: {
                    // 设置水球图内部背景色
                    // borderColor: '#4348EC',
                    // borderWidth: 10
                    color: diskData.backgroundColor, //水球图内部背景色
                },
                label: {
                    // 设置百分比展示
                    color: "#f70", // 百分比颜色
                    normal: {
                        // 百分比正常样式
                        textStyle: {
                            // 百分比正常样式字体
                            fontSize: 40, // 百分比正常样式字体大小
                            color: "#333",
                        },
                        formatter: function (param) {
                            // 百分比正常样式字体格式
                            // return param.value * 100 + "%"; // 百分比正常样式字体格式
                            return diskData.value; // 百分比正常样式字体格式
                        },
                    },
                },
                //外部细圆
                outline: {
                    // 是否显示外圈
                    show: false,
                    borderDistance: 6, // 外部圆线距离水球的距离
                    itemStyle: {
                        // 外部圆线样式
                        borderWidth: 3, // 外部圆线宽度
                        borderColor: "#e25d3e", // 外部圆线颜色
                        //shadowBlur: 20, // 外部圆线阴影范围
                        //shadowColor: 'rgba(0, 0, 0, 0.25)' // 外部圆线阴影颜色
                    },
                },
            },
        ],
    };
    return options;
};

// 初始化柱状图
const initChart = () => {
    let chart1 = echarts.init(document.getElementById("chart1")),
        chart2 = echarts.init(document.getElementById("chart2")),
        chart3 = echarts.init(document.getElementById("chart3")),
        chart4 = echarts.init(document.getElementById("chart4"));
    let options = {
        grid: {
            top: "30px",
            left: "50px",
            right: "4%",
            bottom: "30px",
        },
        xAxis: {
            type: "category",
            data: ["轻度", "中度", "重度", "严重", "报废"],
            axisTick: {
                show: false,
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: "#264ED3",
                    width: 2,
                },
            },
            axisLabel: {
                color: "#FFF",
                margin: 10,
            },
        },
        yAxis: {
            type: "value",
            axisLine: {
                show: true,
                lineStyle: {
                    color: "#264ED3",
                    width: 2,
                },
            },
            splitLine: {
                lineStyle: {
                    color: "#264ED3",
                    width: 2,
                },
            },
            axisLabel: {
                color: "#FFF",
            },
        },
        series: [
            {
                data: [0, 0, 0, 0, 0],
                type: "bar",
                label: {
                    show: true,
                    position: "top",
                    color: "#FFF",
                },
            },
        ],
    };

    let options1 = _.cloneDeep(options),
        options2 = _.cloneDeep(options),
        options3 = _.cloneDeep(options),
        options4 = _.cloneDeep(options);

    options1.series[0].data = getChartData(HomeData.value.la);
    options2.series[0].data = getChartData(HomeData.value.dia);
    options3.series[0].data = getChartData(HomeData.value.lma);
    options4.series[0].data = getChartData(HomeData.value.nianJu);

    chart1.setOption(options1);
    chart2.setOption(options2);
    chart3.setOption(options3);
    chart4.setOption(options4);
};
//清除echarts
const clearCharts = () => {
    let chart1 = echarts.init(document.getElementById("chart1")),
        chart2 = echarts.init(document.getElementById("chart2")),
        chart3 = echarts.init(document.getElementById("chart3")),
        chart4 = echarts.init(document.getElementById("chart4"));
    chart1.dispose();
    chart2.dispose();
    chart3.dispose();
    chart4.dispose();
};
// 设置柱状图颜色
const getChartData = (data: Object) => {
    let arr = [],
        colorObj = {
            green: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#ADFC88" },
                { offset: 1, color: "#66C239" },
            ]),
            blue: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#ACDBFC" },
                { offset: 1, color: "#3D99FA" },
            ]),
            yellow: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#FAF5DC" },
                { offset: 1, color: "#E9E02C" },
            ]),
            orange: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#FAD89E" },
                { offset: 1, color: "#F9A420" },
            ]),
            grey: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#E8EDF8" },
                { offset: 1, color: "#D6D6D7" },
            ]),
        };
    for (let i in data) {
        arr.push({ value: data[i], itemStyle: { color: colorObj[i] } });
    }
    return arr;
};
</script>

<style lang="scss" scoped>
.HomeBox {
    display: flex;
    flex-direction: column;

    min-width: 100%;
    min-height: 100%;
    background: url("../../assets/img/homeBG.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;

    .notime {
        position: fixed;
        top: 4.2vh;
        right: 20px;
        font-size: 20px;
        color: #fff;
    }

    .title {
        height: 13vh;
        text-align: center;
        background: url("../../assets/img/topTitle.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center bottom;
        padding-top: 4vh;
        box-sizing: border-box;
        span {
            height: 6vh;
            line-height: 6vh;
            font-size: 4vh;
            font-weight: 550;
            letter-spacing: 5px;
            background-image: -webkit-linear-gradient(bottom, #ffffff, #45c3f2);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }

    .topBox {
        background: rgba(12, 39, 130, 0.5);
        margin: 2vh;

        .topBoxLine {
            border: 2px solid #15307d;
            background: linear-gradient(to bottom, #0299f5 0px, #0299f5 2px, transparent 0px, transparent 100%) left top no-repeat, linear-gradient(to right, #0299f5 0px, #0299f5 2px, transparent 0px, transparent 100%) left top no-repeat, linear-gradient(to bottom, #0299f5 0px, #0299f5 2px, transparent 0px, transparent 100%) right top no-repeat, linear-gradient(to left, #0299f5 0px, #0299f5 2px, transparent 0px, transparent 100%) right top no-repeat, linear-gradient(to top, #0299f5 0px, #0299f5 2px, transparent 0px, transparent 100%) left bottom no-repeat, linear-gradient(to right, #0299f5 0px, #0299f5 2px, transparent 0px, transparent 100%) left bottom no-repeat, linear-gradient(to top, #0299f5 0px, #0299f5 2px, transparent 0px, transparent 100%) right bottom no-repeat, linear-gradient(to left, #0299f5 0px, #0299f5 2px, transparent 0px, transparent 100%) right bottom no-repeat;
            background-size: 4vh 4vh;
            .boxTitle {
                width: 57vh;
                height: 6vh;
                text-align: center;
                background: url("../../assets/img/numTitle.png");
                background-repeat: no-repeat;
                background-size: 100%;
                background-position: center;
                margin: -3px auto 0;
                padding-top: 5px;
                box-sizing: border-box;
                span {
                    text-align: center;
                    font-size: 3vh;
                    font-weight: bold;
                    background-image: -webkit-linear-gradient(right, #0072ff, #00eaff, #0072ff);
                    -webkit-background-clip: text;
                    background-clip: text;
                    -webkit-text-fill-color: transparent;
                }
            }

            .topNum {
                display: flex;
                column-gap: 40px;
                align-items: center;
                padding: 10px 0;
                justify-content: space-around;
                .topNumItem {
                    width: 23vh;
                    height: 23.3vh;
                    color: #333;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 7vh;
                    .diskEcharts {
                        width: 18vh;
                        height: 18vh;

                        :deep(canvas) {
                            border-radius: 50%;
                        }
                    }
                }
                .topNumBox:nth-child(1) .topNumItem {
                    background: url("../../assets/img/numGreen.png");
                    background-repeat: no-repeat;
                    background-size: 100%;
                    background-position: center;
                }
                .topNumBox:nth-child(2) .topNumItem {
                    background: url("../../assets/img/numBlue.png");
                    background-repeat: no-repeat;
                    background-size: 100%;
                    background-position: center;
                }
                .topNumBox:nth-child(3) .topNumItem {
                    background: url("../../assets/img/numYellow.png");
                    background-repeat: no-repeat;
                    background-size: 100%;
                    background-position: center;
                }
                .topNumBox:nth-child(4) .topNumItem {
                    background: url("../../assets/img/numOrange.png");
                    background-repeat: no-repeat;
                    background-size: 100%;
                    background-position: center;
                }
                .topNumBox:nth-child(5) .topNumItem {
                    background: url("../../assets/img/numGray.png");
                    background-repeat: no-repeat;
                    background-size: 100%;
                    background-position: center;
                }

                .topNumName {
                    text-align: center;
                    font-size: 3vh;
                    color: #00caff;
                    padding: 10px 0 0;
                }
            }
        }
    }

    .bottomBox {
        display: flex;
        column-gap: 20px;
        flex: 1;
        margin: 20px;
        .bottomItem {
            flex: 1;
            display: flex;
            flex-direction: column;

            border: 2px solid #15307d;
            background: linear-gradient(to bottom, #0299f5 0px, #0299f5 2px, transparent 0px, transparent 100%) left top no-repeat, linear-gradient(to right, #0299f5 0px, #0299f5 2px, transparent 0px, transparent 100%) left top no-repeat, linear-gradient(to bottom, #0299f5 0px, #0299f5 2px, transparent 0px, transparent 100%) right top no-repeat, linear-gradient(to left, #0299f5 0px, #0299f5 2px, transparent 0px, transparent 100%) right top no-repeat, linear-gradient(to top, #0299f5 0px, #0299f5 2px, transparent 0px, transparent 100%) left bottom no-repeat, linear-gradient(to right, #0299f5 0px, #0299f5 2px, transparent 0px, transparent 100%) left bottom no-repeat, linear-gradient(to top, #0299f5 0px, #0299f5 2px, transparent 0px, transparent 100%) right bottom no-repeat, linear-gradient(to left, #0299f5 0px, #0299f5 2px, transparent 0px, transparent 100%) right bottom no-repeat;
            background-size: 40px 40px;

            .boxTitle {
                width: 42vh;
                height: 4.5vh;
                text-align: center;
                background: url("../../assets/img/echartsTitle.png");
                background-repeat: no-repeat;
                background-size: 100%;
                background-position: center;
                margin: -0px auto 0;
                padding-top: 5px;
                box-sizing: border-box;
                span {
                    text-align: center;
                    font-size: 2.5vh;
                    font-weight: bold;
                    background-image: -webkit-linear-gradient(right, #0072ff, #00eaff, #0072ff);
                    -webkit-background-clip: text;
                    background-clip: text;
                    -webkit-text-fill-color: transparent;
                }
            }

            .chartBox {
                // width: 500px;
                // height: 400px;
                flex: 1;
            }
        }
    }
}
</style>

<style lang="scss">
.selectDepartmentClass {
    position: fixed;
    top: 10.2vh;
    right: 20px;
    font-size: 20px;
    .el-select {
        --el-select-border-color-hover: #0072ff !important;
        --el-select-input-color: #0072ff !important;
        --el-select-input-focus-border-color: #0072ff !important;
    }

    .el-input {
        --el-input-text-color: #00eaff !important;
        --el-input-border-color: #0072ff !important;
        --el-input-placeholder-color: #0072ff !important;
        --el-input-bg-color: rgba(0, 0, 0, 0) !important;
    }
    // 下拉框
    .el-popper {
        border: 1px solid #0072ff !important;
    }
    .el-select-dropdown {
        background: rgba(12, 39, 130, 1) !important;
        // 下拉框选项
        .el-select-dropdown__item {
            color: #0072ff !important;
        }
        .hover {
            background: #0072ff !important;
            color: #00eaff !important;
        }
    }
    // 下拉框小箭头
    .el-popper__arrow::before {
        border: 1px solid #0072ff !important;
        background: #0072ff !important;
    }
}
</style>
